<template>
  <div class="home-content" >
    <h2>热门推荐</h2>
    <div class="hot" >
        <div v-for="item in hotRoom" @click="toDetail(item.data.houseId)">
            <room-type-v3 :item="item.data" v-if="item.discoveryContentType === 3"></room-type-v3>
            <room-type-v9 :item="item.data" v-if="item.discoveryContentType === 9"></room-type-v9>
        </div>
    </div>
  </div>
</template>

<script setup>
    import useHomeStore from '@/stores/modules/home';
    import RoomTypeV3 from '@/components/HotRoom/RoomType-v3.vue';
    import RoomTypeV9 from '@/components/HotRoom/RoomType-v9.vue';
    import { storeToRefs } from 'pinia';
    import { useRouter } from "vue-router";

    const homeStore = useHomeStore()
    const {hotRoom} = storeToRefs(homeStore)

    const router = useRouter()

    function toDetail(id){
        router.push("/details/"+id)
    }
</script>

<style lang="less" scoped>
    .home-content {
        margin: 20px 0 0 10px;

    }
    .hot {
        display: flex;
        flex-wrap: wrap;
    }

</style>